<!--
 * 地址映射
 * @author luguoxiang
 * @date 2025-05-10
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <edit-container ref="containerRef" v-bind="containerConfig">
    <lg-form ref="formRef" v-loading="loading" :schema="schema" v-bind="formConfig">
      <template #url>
        <lg-auto-complete v-model="data.url" :options="loadMenu" />
      </template>
    </lg-form>
  </edit-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EditContainer, useEditContainer } from '@/components';
import { LgForm, LgAutoComplete } from '@/soar';
import api, { subject } from './api';
import schema from './schema';
import menuApi from '@/pages/system/auth/menu/api';

const emits = defineEmits(['ok']);

const containerRef = ref();
const formRef = ref();
const { containerConfig, formConfig, loading, open, data } = useEditContainer<any>({
  header: subject,
  containerRef,
  formRef,
  getData: (params: any) => api.detail(params.id),
  onOk: async ({ values, data, params, isUpdate, changed }) => {
    if (changed) {
      values.id = data.id;
      await api.saveOrUpdate(values, isUpdate);
      emits('ok', values);
    }
  },
  containerProps: {
    width: '500px',
  },
});

function loadMenu() {
  const params = {
    $soarQuery: {
      'type-eq': 1,
      fields: 'path,title',
      pageSize: 9999,
      queryType: 'list',
    },
  };
  return menuApi.query(params).then((res) => {
    return res.list.map((x) => {
      return {
        label: `${x.title}(${x.path})`,
        text: x.path,
      };
    });
  });
}

defineExpose({ open });
</script>
